<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html>
<head th:replace="layout::common_head(~{::title}, ~{::supplement})">
	<meta charset="UTF-8">
	<title>仪表盘</title>
	<script src="../static/js/jquery-3.2.1.min.js"></script>
	<script src="../static/js/semantic.js" th:src="@{js/semantic.js}"></script>
	<link rel="stylesheet" href="../static/css/semantic.css" th:href="@{css/semantic.css}"/>
	<link rel="stylesheet" href="../static/css/icon.css" th:href="@{/css/icon.css}"/>
	<link href="../static/css/ionicons.min.css" rel="stylesheet" th:href="@{css/ionicons.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/jquery.dataTables.min.css}">
	<link href="../static/css/main.css" rel="stylesheet" th:href="@{css/main.css}"/>
	<link href="../static/css/pace.css" rel="stylesheet" th:href="@{css/pace.css}"/>
	<th:block th:fragment="supplement">
        <link href="../static/css/lobibox.css" rel="stylesheet" th:href="@{css/lobibox.css}"/>
		<script src="../static/js/echarts.min.js" th:src="@{js/echarts.min.js}"></script>
		<!--<script src="http://rapapi.org/rap.plugin.js?projectId=19544&mode=1"></script>-->
		<style type="text/css">
			.pie{height: 200px}
			.pie_copy{height: 200px;margin-top: 100px}
			.tab_height{height: 540px;}
			.ui.segment.block_row2{
				min-height: 360px;
			}
			.ui.segment.block_row3{
				min-height: 500px;
				width: 100%;
				overflow-y:auto;
				overflow-x:auto;
			}
			/*问题详情modle固定高度*/
			.ui.segment.detailconfirm{
				height: 232px;overflow-y:auto;overflow-x:hidden
			}
			.ui.segment.detailalarmed{
				min-height: 130px;
			}
			#alertMenu{
				height: 137px;overflow-y:auto;overflow-x:hidden
			}
			#alertmessage{
				height: 40px;overflow-y:auto;overflow-x:hidden
			}

			/*原生label 有个下外边距*/
			.ui .label {
				margin-bottom: 0;
			}
			/*原生dataTable 下外边框颜色是#111*/
			table.dataTable.no-footer {
				border-bottom: 1px solid #DDDDDD;
			}
		</style>
	</th:block>
</head>

<body>
<!--header start-->
<div id="contextWrap">
	<!--sidebar-->
	<div class="ui sidebar vertical left menu overlay  borderless visible sidemenu inverted  grey" data-color="grey"
		 th:replace="layout::left_menu">
		<a class="item logo" href="index.html">
			<img src="../static/images/logo.png" alt="stagblogo"/><img src="../static/images/thumblogo.png"
																	   alt="stagblogo" class="displaynone"/>
		</a>
		<div class="ui accordion inverted">
			<a class="title item active" href="dashboard.html">
				<i class="ion-speedometer titleIcon icon"></i>仪表盘
			</a>
			<a class="title item" href="tab.html">
				<i class="ion-ios-lightbulb titleIcon icon"></i>监控视图
			</a>
			<a class="item" href="treegrid.html">
				<i class="ion-ios-world titleIcon  icon"></i>业务概览
			</a>
			<div class="title item">
				<i class="ion-mouse titleIcon icon"></i>设备概览<i class="dropdown icon"></i>
			</div>
			<div class="content">
				<a class="item" href="tab.html">服务器</a>
				<a class="item" href="table.html">网络设备</a>
				<a class="item" href="error.html">数据库</a>
				<a class="item" href="login.html">应用</a>
			</div>
			<a class="title item" href="error.html">
				<i class="ion-arrow-graph-up-right titleIcon icon"></i>视图展示
			</a>
			<div class="title item">
				<i class="ion-paintbrush titleIcon icon"></i>告警展示<i class="dropdown icon"></i>
			</div>
			<div class="content">
				<a class="item" href="error.html">告警日历</a>
				<a class="item" href="error.html">告警列表</a>
			</div>
			<a class="title item" href="error.html">
				<i class="ion-briefcase titleIcon icon"></i>报表统计
			</a>
		</div>

		<div class="ui dropdown item displaynone scrolling">
			<span>仪表盘1</span>
			<i class="ion-speedometer icon"></i>
			<div class="menu">
				<div class="header">
					仪表盘1
				</div>
			</div>
		</div>

		<div class="ui dropdown item displaynone scrolling">
			<span>监控视图</span>
			<i class="ion-ios-lightbulb icon"></i>
			<div class="menu">
				<div class="header">
					监控视图
				</div>
			</div>
		</div>

		<div class="ui dropdown item displaynone scrolling">
			<span>业务概览</span>
			<i class="ion-ios-world icon"></i>
			<div class="menu">
				<div class="header">
					业务概览
				</div>
			</div>
		</div>

		<div class="ui dropdown item displaynone scrolling">
			<span>设备概览</span>
			<i class="ion-mouse icon"></i>
			<div class="menu">
				<div class="header">
					设备概览
				</div>
				<div class="ui divider"></div>
				<a class="item" href="treegrid.html">服务器</a>
				<a class="item" href="table.html">网络设备</a>
				<a class="item" href="error.html">数据库</a>
				<a class="item" href="login.html">应用</a>
			</div>
		</div>

		<div class="ui dropdown item displaynone scrolling">
			<span>视图展示</span>
			<i class="ion-arrow-graph-up-right icon"></i>
			<div class="menu">
				<div class="header">
					视图展示
				</div>
			</div>
		</div>

		<div class="ui dropdown item displaynone scrolling">
			<span>告警展示</span>
			<i class="ion-paintbrush icon"></i>
			<div class="menu">
				<div class="header">
					告警展示
				</div>
				<div class="ui divider"></div>
				<a class="item" href="error.html">告警日历</a>
				<a class="item" href="error.html">告警列表</a>
			</div>
		</div>

		<div class="ui dropdown item displaynone scrolling">
			<span>报表统计</span>
			<a href="error.html">
				<i class="ion-briefcase icon"></i>
			</a>
		</div>

		<div class="ui divider"></div>

	</div>

	<!--sidebar-->

	<div class="pusher">
		<!--navbar-->
        <div class="navslide navwrap" th:replace="layout::top_nav">
			<div class="ui menu icon borderless grid" data-color="inverted white">
				<a class="item labeled openbtn">
					<i class="ion-navicon-round big icon"></i>
				</a>
				<div class="item ui colhidden">
					<div class="ui icon input">
						<input type="text" placeholder="Search...">
						<i class="search icon"></i>
					</div>
				</div>
				<div class="right menu colhidden">
					<div class="ui dropdown item labeled icon">
						<i class="bell icon"></i> 告警
						<div class="ui red label mini circular">6</div>
						<div class="menu">
							<div class="header">
								紧急告警
							</div>
							<div class="item">
								告警信息1……
								<div class="ui teal left pointing label">1</div>
							</div>
							<div class="item">
								告警信息2……
								<div class="ui label">51</div>
							</div>
							<div class="item">
								告警信息3……
								<div class="ui label">1</div>
							</div>
							<div class="header">
								严重告警
							</div>
							<div class="item">
								<i class="dropdown icon"></i>
								<span class="text">更多</span>
								<div class="menu">
									<div class="item">告警信息……</div>
									<div class="item">告警信息……</div>
								</div>
							</div>
						</div>
					</div>
					<div class="ui dropdown item">
						<img class="ui mini circular image" src="../static/images/0.jpg" th:src="@{images/0.jpg}"
							 alt="label-image"/>
						<div class="menu">
							<a class="item" href="mail.html">注销</a>
						</div>
					</div>
					<a class="item labeled rightsidebar computer only">
						<i class="ion-wrench large icon"></i>工具
					</a>

				</div>
			</div>
		</div>
		<!--navbar-->
		<!--maincontent-->
		<div class="mainWrap navslide">
			<div class="ui equal width left aligned padded grid stackable" >
				<!--Site Content-->
				<div class="sixteen wide column">
                    <!--<div class="ui container">-->
                        <div class="header item">
                            <h2><i class="large dashboard icon"></i>仪表盘</h2>
                        </div>
                        <div class="ui pointing secondary menu tab_content">
                            <a class="item active" data-tab="all_datatab">全部</a>
                            <a class="item" data-tab="platform_datatab">业务系统</a>
                            <a class="item" data-tab="host_datatab">设备</a>
                            <a class="item" data-tab="point_datatab">监控点</a>
                        </div>
                        <div class="ui tab active" data-tab="all_datatab">
                            <div class="ui three column grid segment">
                                <div class="column">
                                    <div id="platform_pie" class="pie"></div>
                                </div>
                                <div class="column">
                                    <div id="host_pie" class="pie"></div>
                                </div>
                                <div class="column">
                                    <div id="point_pie" class="pie"></div>
                                </div>
                            </div>

                            <div class="ui grid segment">
                                <div class="row">
                                    <div class="sixteen wide column">
                                        <h3>
                                            <i class="tag icon"></i>
                                            当前问题
                                        </h3>
                                    </div>
                                    <!-- <div class="ui right floated buttons four wide column">
                                         <button id="time_today" class="ui button">今天</button>
                                         <button id="time_days" class="ui button">三天</button>
                                         <button id="time_week" class="ui button">一周</button>
                                         <button id="time_month" class="ui button">一月</button>
                                     </div>-->
                                    <!--</a>-->
                                </div>
								<table id="problem_table"
									   class="ui compact celled table center aligned " width="100%">
								</table>
                            </div>
                        </div>
                        <div class="tab_height ui tab" data-tab="platform_datatab">
                            <div class="ui grid">
                                <div class="five wide column">
                                    <div class="ui segment block_row3">
                                        <div id="platform_pie_copy" class="pie_copy"></div>
                                    </div>
                                </div>
                                <div class="eleven wide column" style="padding-left: 0px">
                                    <div class="ui segment block_row3">
                                        <table id="platform_table" class="ui compact celled table center aligned" width="100%">
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab_height ui tab" data-tab="host_datatab">
                            <div class="ui grid">
                                <div class="five wide column">
                                    <div class="ui segment block_row3">
                                        <div id="host_pie_copy" class="pie_copy"></div>
                                    </div>
                                </div>
                                <div class="eleven wide column" style="padding-left: 0px">
                                    <div class="ui segment block_row3">
                                        <table id="host_table" class="ui compact celled table center aligned" width="100%">
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab_height ui tab" data-tab="point_datatab">
                            <div class="ui grid">
                                <div class="five wide column">
                                    <div class="ui segment block_row3">
                                        <div id="point_pie_copy" class="pie_copy"></div>
                                    </div>
                                </div>
                                <div class="eleven wide column" style="padding-left: 0px">
                                    <div class="ui segment block_row3">
                                        <table id="point_table" class="ui compact celled table center aligned" width="100%"><!-- style="width: 300px" width="300px"-->
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                   <!-- </div>-->
				<!--Site Content-->
			</div>
            </div>
		</div>
		<!--maincontent-->
	</div>
</div>
<div id="alert_popup"></div>
<div id="ack_popup"></div>

<!--事件详情modal框 -->
<div th:replace="problemlist::problem_event_page"></div>
<!--确认事件modal框 -->
<div th:replace="problemlist::problem_acknowledge_page"></div>
<th:block th:replace="layout::bottom_script(~{::specialScript})">

	<script src="../static/js/js.cookie.js" th:src="@{js/js.cookie.js}"></script>
	<script src="../static/js/jquery.nicescroll.min.js" th:src="@{js/jquery.nicescroll.min.js}"></script>
	<script data-pace-options='{ "ajax": false }' src="../static/js/pace.js" th:src="@{js/pace.js}"></script>
	<script src="../static/js/main.js" th:src="@{js/main.js}"></script>
	<th:block th:fragment="specialScript">
		<script src="../static/js/jquery.dataTables.js" th:src="@{js/jquery.dataTables.js}"></script>
		<script src="../static/js/custom-datatable.js" th:src="@{js/custom-datatable.js}"></script>
		<script src="../static/js/notifications.js" th:src="@{js/notifications.js}"></script>
		<script src="../static/js/assistantTool.js" th:src="@{js/assistantTool.js}"></script>
        <script src="../static/js/custom/problem-common.js" th:src="@{js/custom/problem-common.js}"></script>
        <script src="../static/js/custom/problem-table.js" th:src="@{js/custom/problem-table.js}"></script>
	</th:block>
</th:block>
<script type="text/javascript">
    //给搜索按钮绑定点击事件
    $(document).ready(function () {
        var problemTable = $('#problem_table').problemTable()
    })
</script>
<script type="text/javascript">
	//饼状图
    var Color = ['#5FB878', '#F7B824', '#f11111','#d2d2d2', '#2F4056'];//绿色#5FB878黄色#F7B824红色#FF5722老红#DB2828
    var platform_index;//记录切换页面时饼状图点击状态
    var host_index;
    var point_index;
    //业务系统pie
    var platform_myChart = echarts.init(document.getElementById('platform_pie'));
    var platform_option={
        title: {
            text: '',
            subtext: '业务系统',
            x: 'center',
            y: 'center',
            itemGap: 1,
            textStyle: {
                color: '#01AAED',
                fontFamily: '微软雅黑',
                fontSize: 24,
                fontWeight: 'bolder'
            }
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        series: [
            {
                name: '业务系统',
                type: 'pie',
                radius: ['40%', '65%'],
                selectedMode: '',
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            formatter: function (param) {
                                return param.name + param.value + "个" + ':\n' + Math.round(param.percent) + '%';
                            },
                            textStyle: {
                                fontWeight: 'bolder'
                            }
                        }
                    },
                },
                data: [ ],
                color: Color
            }
        ]
    };
    platform_myChart.showLoading();
    $.ajax({
        type: "get",
        async: true,
        url: "/platform/count",
        data: {},
        dataType: "json",
        success: function (result) {
            if(result.success) {
                platform_myChart.hideLoading();
                var data = result.data;
                var dataList = data.stateNum;
                var total = data.totalNum + "个";
                if (dataList) {
                    platform_option.title.text = total;
                    platform_option.series[0].data = dataList;
                    // 重写指定图表的配置项和数据
                    platform_myChart.setOption(platform_option);
                }
            }
            else {
                errorMsg_no_data("业务系统 Pie");
            }
        },
        error: function () {
            errorMsg_no_connect("业务系统 Pie");
        }
    })
    platform_myChart.on('click', function (param) {
        platform_index =param.dataIndex;
        $('.tab_content.menu .item').tab('change tab','platform_datatab',platform_index);
    });
    //设备pie
    var host_myChart = echarts.init(document.getElementById('host_pie'));
    var host_option={
        title: {
            text: '',
            subtext: '设备',
            x: 'center',
            y: 'center',
            itemGap: 1,
            textStyle: {
                color: '#01AAED',
                fontFamily: '微软雅黑',
                fontSize: 24,
                fontWeight: 'bolder'
            }
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        series: [
            {
                name: '设备',
                type: 'pie',
                radius: ['40%', '65%'],
                selectedMode: '',
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            formatter: function (param) {
                                return param.name + param.value + "台" + ':\n' + Math.round(param.percent) + '%';
                            },
                            textStyle: {
                                fontWeight: 'bolder'
                            }
                        }
                    },
                },
                data: [],
                color: Color
            }
        ]
    };
    host_myChart.showLoading();
    $.ajax({
        type: "get",
        async: true,
        url: "/host/count",
        data: {},
        dataType: "json",
        success: function (result) {
            if(result.success) {
                host_myChart.hideLoading();
                var data = result.data;
                var dataList = data.stateNum;
                var total = data.totalNum + "台";
                if (dataList) {
                    host_option.title.text = total;
                    host_option.series[0].data = dataList;
                    host_myChart.setOption(host_option);
                }
            }
            else {
                errorMsg_no_data("设备 Pie");
            }
        },
        error: function () {
            errorMsg_no_connect("设备 Pie");
        }
    })
    host_myChart.on('click', function (param) {
        host_index =param.dataIndex;
        $('.tab_content.menu .item').tab('change tab','host_datatab',host_index);
    });
    //监控点pie
    var point_myChart = echarts.init(document.getElementById('point_pie'));
    var point_option = {
        title: {
            text: '',
            subtext: '监控点',
            x: 'center',
            y: 'center',
            itemGap: 1,
            textStyle: {
                color: '#01AAED',
                fontFamily: '微软雅黑',
                fontSize: 24,
                fontWeight: 'bolder'
            }
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        series: [
            {
                name: '监控点',
                type: 'pie',
                radius: ['40%', '65%'],
                selectedMode: '',
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            formatter: function (param) {
                                return param.name + param.value + "个" + ':\n' + Math.round(param.percent) + '%';
                            },
                            textStyle: {
                                fontWeight: 'bolder'
                            }
                        }
                    },
                },
                data: [],
                color: Color
            }
        ]
    }
    point_myChart.showLoading();
    $.ajax({
        type: "get",
        async: true,
        url: "/point/count",
        data: {},
        dataType: "json",
        success: function (result) {
            if(result.success) {
                point_myChart.hideLoading();
                var data = result.data;
                var dataList = data.stateNum;
                var total = data.totalNum + "个";
                if (dataList) {
                    point_option.title.text = total;
                    point_option.series[0].data = dataList;
                    point_myChart.setOption(point_option);
                }
            }
            else {
                errorMsg_no_data("监控点 Pie");
            }
        },
        error: function () {
            errorMsg_no_connect("监控点 Pie");
        }
    })
    point_myChart.on('click', function (param) {
     point_index =param.dataIndex;
        $('.tab_content.menu .item').tab('change tab','point_datatab',point_index);
    });
	//tabdata切换加载
    var platform_table = $("#platform_table").DataTable({
        "createdRow": function (row, data, dataIndex) {
            if (data.state== "正常") {
                $(row).addClass('positive');
            } else {
                $(row).addClass('negative');
            }
            $('td:eq(1)', row).addClass('right aligned');
            $('td:eq(2)', row).addClass('right aligned');
            $('td:eq(3)', row).addClass('right aligned');
            $('td:eq(4)', row).addClass('right aligned');
        },
        ajax: {
            url: '/platform/list',
            dataSrc: 'data'
        },
        columns: [
            {
                "data": null,
                "width": "100px",
                "title": "名称",
                render: function (data, type, row) {
                    return '<a href="/platformdetail#' + row.platformId + '_' + row.name + '">' + row.name + '</a>';
                }
            },

            {
                "data": null,
                "width": "100px",
                "title": "健康度",
                render: function (data, type, row) {
                    var health = row.availability;
                    return parseInt(health);
                }
            },
            {
                "data": "highNum",
                "width": "50px",
                "title": "严重",
            },
            {
                "data": "warningNum",
                "width": "50px",
                "title": "警告",
            },
            {
                "data": "allNum",
                "width": "50px",
                "title": "设备总数",
            },
            {
                "data": "state",
                "width": "50px",
                "title": "状态",
                "orderable": false,
            }
        ],
    });
    //设备datatable
    var host_table = $("#host_table").DataTable({
        "createdRow": function (row, data, dataIndex) {
            if (data.state== "正常") {
                $(row).addClass('positive');
            } else {
                $(row).addClass('negative');
            }
            $('td:eq(3)', row).addClass('right aligned');
            $('td:eq(4)', row).addClass('right aligned');
            $('td:eq(5)', row).addClass('right aligned');
        },
        ajax: {
            url: '/host/list',
            dataSrc: 'data'
        },
        columns: [
            {
                "data": null,
                "width": "100px",
                "title": "名称",
                render: function (data, type, row) {
                    return '<a href="/overview#h'+ row.hostId +'">' + row.name + '</a>';
                }
            },
            {
                "data": "ip",
                "width": "100px",
                "title": "IP",
                "orderable":false,
            },
            {
                "data": "type",
                "width": "200px",
                "title": "类型",
                "orderable":false,
            },
            {
                "data": "highNum",
                "width": "50px",
                "title": "严重",
            },
            {
                "data": "warningNum",
                "width": "50px",
                "title": "警告",
            },
            {
                "data": "allNum",
                "width": "50px",
                "title": "总数",
            },
            {
                "data": "state",
                "width": "50px",
                "title": "状态",
                "orderable":false,
            }
        ],
    });
    //监控点datatable
    var point_table = $("#point_table").DataTable({
        "autoWidth": false,
        "createdRow": function (row, data, dataIndex) {
            if (data.state== "正常") {
                $(row).addClass('positive ');
            } else {
                $(row).addClass('negative');
            }
            if (strlen(data.name) > 70) {
                $('td:eq(0)', row).attr("title",data.name);
            }
            $('td:eq(0)', row).addClass('left aligned');
        },
        ajax: {
            url: '/point/list',
            dataSrc: 'data'
        },
        columns: [
            /*{
                "data": "name",
                "width": "70%",
                "title": "名称"
            },*/
            {
                "data": null,
                "width": "30%",
                "title": "名称",
                render: function (data, type, row) {
                    if(strlen(row.name) > 70)
                    {
                        return '<a href="/overview#p'+ row.pointId +'">' + row.name.substr(0, 70)+"…" + '</a>';
                    }else {
                        return '<a href="/overview#p'+ row.pointId +'">' + row.name + '</a>';

					}
                }
            },
            {
                "data": "hostName",
                "width": "20%",
                "title": "所属设备",
                "orderable":false,
            },
            {
                "data": "state",
                "width": "10%",
                "title": "状态",
                "orderable":false,
            },
        ],
    });
    $('.tab_content.menu .item')
        .tab({
            'onFirstLoad': function(path){
				if(path === 'platform_datatab') {
                    var platform_copy_myChart = echarts.init(document.getElementById('platform_pie_copy'));
                    platform_option.series[0].selectedMode = 'single';
                    platform_copy_myChart.setOption(platform_option);
                    var last_param;//上一次点击状态
                    var num;//点击次数
                    platform_copy_myChart.on('click', function (param) {
                        var index = param.dataIndex;
                        if(index==0) {platform_table.search( "正常" ).draw();}
                        if(index==1) {platform_table.search( "警告" ).draw();}
                        if(index==2) {platform_table.search( "严重" ).draw();}
                        if (last_param==index){
                            num++;
                            if(num%2 == 0){
                                platform_table.search("").draw();
                            }
                        }else {
                            last_param=index;
                            num=1;
                        }
                    });
                }
                if(path === 'host_datatab') {
					var host_copy_myChart = echarts.init(document.getElementById('host_pie_copy'));
                    host_option.series[0].selectedMode = 'single';
					host_copy_myChart.setOption(host_option);
                    var last_param;//上一次点击状态
                    var num;//点击次数
                    host_copy_myChart.on('click', function (param) {
                        var index = param.dataIndex;
                        if(index==0) {host_table.search( "正常" ).draw();}
                        if(index==1) {host_table.search( "警告" ).draw();}
                        if(index==2) {host_table.search( "严重" ).draw();}
                        if (last_param==index){
                            num++;
                            if(num%2 == 0){
                                host_table.search("").draw();
                            }
                        }else {
                            last_param=index;
                            num=1;
                        }
                    });
                }
                if(path === 'point_datatab') {
					var point_copy_myChart = echarts.init(document.getElementById('point_pie_copy'));
                    point_option.series[0].selectedMode = 'single';
					point_copy_myChart.setOption(point_option);
                    var last_param;//上一次点击状态
                    var num;//点击次数
                    point_copy_myChart.on('click', function (param) {
                        var index = param.dataIndex;
                        if(index==0) {point_table.search( "正常" ).draw();}
                        if(index==1) {point_table.search( "警告" ).draw();}
                        if(index==2) {point_table.search( "严重" ).draw();}
                        if (last_param==index){
                            num++;
                            if(num%2 == 0){
                                point_table.search("").draw();
                            }
                        }else {
                            last_param=index;
                            num=1;
                        }
                    });
                }
            },
            'onVisible': function(path){
                if(path === 'platform_datatab') {
                    if(platform_index==0) {platform_table.search( "正常" ).draw();}
                    if(platform_index==1) {platform_table.search( "警告" ).draw();}
                    if(platform_index==2) {platform_table.search( "严重" ).draw();}
                }
                if(path === 'host_datatab') {
                    if(host_index==0) {host_table.search( "正常" ).draw();}
                    if(host_index==1) {host_table.search( "警告" ).draw();}
                    if(host_index==2) {host_table.search( "严重" ).draw();}
                }
                if(path === 'point_datatab') {
                    if(point_index==0) {point_table.search( "正常" ).draw();}
                    if(point_index==1) {point_table.search( "警告" ).draw();}
                    if(point_index==2) {point_table.search( "严重" ).draw();}
                }
            }
        });
</script>
</body>
</html>
